<template>
  <div class="notifications-wrapper q-pb-xl relative-position q-pr-md q-pt-md"
    style="min-height: 400px">
    <div
      class="absolute-center column"
      v-if="!loaded">
      <q-spinner-gears size="50px" color="primary" />
      <div class="loading-label">{{ $t('加载中') }}</div>
    </div>

    <div v-for="(nt, idx) in data.docs || []" :key="idx"
      :class="{
        read: nt.MarkAsRead,
        cursorPointer: !!nt.Link,
      }"
      class="uc-notification-item column no-wrap justify-center q-mb-md cursor-pointer"
      @click="$router.push(nt.Link)"
      >
      <div class="uc-notification-item-content-row row no-wrap items-center relative-position">
        <div class="uc-notification-item-date flex column justify-center items-center">
          <div class="p">{{ nt.LastUpdateDate | dateDay }}</div>
          <div class="year">{{ nt.LastUpdateDate | dateYearMonth }}</div>
        </div>

        <div
          class="full-width col column  q-pa-md">
          <div class="uc-notification-item-title full-width ellipsis">
            {{ nt.Title }}
          </div>
          <div class="uc-notification-item-content full-width ellipsis-3-lines">
            {{ nt.Content }}
          </div>
        </div>

        <div class="action-buttons row">
          <q-btn icon="fas fa-envelope-circle-check" size="sm" flat dense
            @click.stop="markAsRead(nt)"></q-btn>
          <q-btn icon="delete" size="sm" flat dense
            @click.stop="deleteNt(nt)"></q-btn>
        </div>
      </div>
    </div>

    <div v-if="data && data.total === 0" class="no-data-label">
      <div class="absolute-center">
        {{$t('暂无数据')}}
      </div>
    </div>

    <pagination v-if="data && data.total" :data="data" @changed="pageChanged"></pagination>
  </div>
</template>

<script>
import mixins from 'eis-admin-mixins';
import pagination from '../../components/pagination.vue';

export default {
  name: 'NotificationsUc',
  mixins: [mixins.ObjectDataMixin],
  components: {
    pagination,
  },
  data() {
    return {
      loaded: false,
    };
  },
  methods: {
    afterRefresh() {
      this.loaded = true;
    },
    pageChanged(p) {
      this.refreshData({ page: p });
    },
    markAsRead(nt) {
      this.postRequest('/noty/read', {
        id: nt.id,
        read: !nt.MarkAsRead,
      }).then((res) => {
        if (res && res.msg === 'OK') {
          this.$set(nt, 'MarkAsRead', !nt.MarkAsRead);
        }
      });
    },
    deleteNt(nt) {
      if (!nt || !nt.id) return;

      this.showNotifyDialog({
        content: this.$t('请确认删除此通知'),
        warning: '删除后无法恢复！',
        canCancel: true,
        size: {
          w: 460,
        },
        okText: this.$t('okButtonText'),
        cancelText: this.$t('cancelButtonText'),
      }, () => {
        this.postRequest('/noty/delete', {
          id: nt.id,
        }).then((res) => {
          if (res && res.msg === 'OK') {
            this.refreshData({
              page: this.data.page || 1,
            });
          }
        });
      });
    },
    showNotifyDialog(options, func) {
      this.$MsgDialog({ type: '', ...options })
        .then(() => {
          if (func && typeof func === 'function') {
            func();
          }
        })
        .catch(() => { });
    },
  },
};
</script>

<style lang="scss" scoped>
.notifications-wrapper {
  .loading-label {
    padding: 16px 0;
    color: rgba(188, 188, 188, 1);
    font-size: 16px;
    text-align: center;
    font-family: SourceHanSansSC-regular;
  }

  .uc-notification-item {
    &-title {
      font-size: 1.15rem;
      font-weight: 400;
    }
    &-content {
      font-size: 0.875rem;
      opacity: 0.85;
    }
    &-date {
      width: 90px;
      height: 71px;
      border-radius: 8px;
      border: solid 2px #265fb3;
      .p {
        font-size: 28px;
        color: #265fb3;
      }
      .year {
        font-size: 15px;
        color: #265fb3;
      }
    }
    &.read {
      opacity: 0.5;
    }
  }
}
</style>
